<template>
	<div class="header">
		<div class="head-left">
			<div class="iconfont back-icon">&#xe624;</div>
		</div>
		<div class="head-input"><span class="iconfont input-icon">&#xe632;</span>输入城市/景点/游玩主题</div>
		<router-link to="/city">
			<div class="head-right" style="color: #fff;">
				{{this.city}}
				<span class="iconfont down-icon">&#xe64a;</span>
			</div>
		</router-link>
	</div>
</template>

<script>
	export　default {
		name:'HomeHead',
		props:{
			city:String
		}
	}
</script>

<style scoped>
	.header{
		display: flex;
		height: 0.86rem;
		background: #00bcd4;
		color: #fff;
		line-height: .86rem;
	}
	.head-left{
		width: 0.64rem;
		height: 0.86rem;
		float: left;
		
	}
	.back-icon{
		font-size: 0.4rem;
		text-align: center;
	}
	.input-icon{
		padding-left: 0.2rem;
		font-size: 0.3rem;
	}
	.head-input{
		flex: 1;
		background: #fff;
		border-radius: 0.1rem;
		margin-top: 0.1rem;
		height: .64rem;
		margin-left: .2rem;
		color: #ccc;
		line-height: .64rem;
		margin-right: 0.1rem;
	}
	.head-right{
		width: 1.24rem;
		height: 0.86rem;
		float: right;
		text-align: center;
	}
	.down-icon{
		font-size: 0.2rem;
		margin-right: 0.1rem;
	}
</style>